<template>
  <!-- 最外部容器 -->
  <div class="zuiwaibu">
    <!-- 头部容器 -->
    <div class="head">
      <Header :textName="textName"></Header>
      <!-- 头像位置 -->
      <div class="user-info-box" @click="toLogon">
        <div class="portrait-box">
          <img
            class="portrait"
            :src="avatar ? avatar : '/img/183.eaafae45.jpg'"
          />
        </div>
        <!-- 昵称 -->
        <div class="info-box">
          <span class="username">{{ username ? username : "游客" }}</span>
        </div>
      </div>
    </div>

    <!-- 中间图片容器 -->
    <div class="img">
      <img src="./images/183.jpg" alt="" />
    </div>

    <!-- 中间内容区域 -->
    <div class="cardList">
      <div class="card-item">
        <i class="ri-todo-line"></i>
        <span class="title">我的订单</span>
        <p class="more">></p>
      </div>
      <div class="card-item">
        <i class="ri-heart-3-line"></i>
        <span class="title">我的收藏</span>
        <p class="more">></p>
      </div>
      <div class="card-item">
        <i class="ri-exchange-dollar-line"></i>
        <span class="title">退款/售后</span>
        <p class="more">></p>
      </div>
      <div class="card-item">
        <i class="ri-coupon-2-line"></i>
        <span class="title">优惠卷</span>
        <p class="more">></p>
      </div>
      <div class="card-item">
        <i class="ri-medal-line"></i>
        <span class="title">优先购</span>
        <p class="more">></p>
      </div>
      <div class="card-item" @click="toaddress">
        <i class="ri-map-pin-line"></i>
        <span class="title">收货地址</span>
        <p class="more">></p>
      </div>
      <div class="card-item">
        <i class="ri-information-fill"></i>
        <span class="title">关于我们</span>
        <p class="more">></p>
      </div>
      <div class="card-item">
        <i class="ri-shield-user-fill"></i>
        <span class="title">资质证照</span>
        <p class="more">></p>
      </div>
      <div class="card-item">
        <i class="ri-article-line"></i>
        <span class="title">协议规则</span>
        <p class="more">></p>
      </div>
      <div class="card-item">
        <i class="ri-article-line"></i>
        <span class="title">门店购</span>
        <p class="more">></p>
      </div>
    </div>
  </div>
</template>

<script>
  import Header from "@/components/Header";
  import { mapState } from "vuex";
  // 引入字体图标库
  import "./images/fonts/remixicon.css";
  export default {
    name: "Personal",
    data() {
      return {
        textName: "小米有品",
      };
    },
    components: {
      Header,
    },

    computed: {
      // 读取数据
      ...mapState("logon", ["userInfo"]),
      // 头像
      avatar() {
        return this.userInfo.userInfo.avatar;
      },
      // 昵称
      username() {
        return this.userInfo.userInfo.username || "";
      },
    },

    // 点击头像去登录页面
    methods: {
      toLogon() {
        //判断是否已经登陆，如果已经登录则不能登录，不跳转路由
        if (!this.username) {
          this.$router.push({
            name: "logon",
          });
        }
      },
      // 去我的地址页面
      toaddress() {
        this.$router.push({
          name: "address",
        });
      },
    },
  };
</script>

<style lang="less" scoped>
  * {
    margin: 0;
    padding: 0;
  }

  .title span {
    display: table-cell;
    vertical-align: middle;
  }

  /*头像区域 */
  .user-info-box {
    height: 520px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    background-color: #9f8052;
    margin-bottom: 5px;
  }

  /* 头像 */
  .user-info-box .portrait {
    width: 180px;
    height: 180px;
    border: 5px solid #fff;
    border-radius: 50%;
    margin-left: 30px;
    margin-top: 130px;
  }

  /* 昵称 */
  .user-info-box .username {
    font-size: 30px;
    color: #303133;
    margin-left: 30px;
    background-color: #b2b2b2;
    border-radius: 15%;
  }

  /* 广告容器 */
  .img {
    width: 900;
    height: 200px;
    background-color: #f2f2f2;
    padding: 20px;
  }

  /* 广告图片 */
  .img img {
    width: 100%;
    height: 100%;
    border-radius: 25px;
  }

  .cardList {
    margin-top: 20px;
  }

  .cardList .card-item {
    border-top: 1px solid #f2f2f2;
    height: 120px;
    line-height: 120px;
    padding: 10px;
    font-size: 40px;
    color: #333;
  }

  .cardList .card-item .more {
    float: right;
  }
  .cardList .card-item i {
    margin-right: 15px;
    color: #c2c2c2;
  }
  .cardList .card-item p {
    margin-right: 15px;
    color: #b6b6b6;
  }
</style>